<template>
  <div class="horizontal-nav-bar">
    <div
        v-for="(item, index) in navItems"
        :key="index"
        :class="['nav-item', { active: selectedIndex === index }]"
        @click="selectItem(index)"
        ref="navItem"
    >
      <div :style="config.nav.style">
        {{ item.label }}
      </div>
    </div>
    <div :class="config.index!=0?'underline':'underline1'" :style="{ left: underlineLeft, width: underlineWidth}"></div>
  </div>
</template>

<script>
export default {
  name: 'NavBarVIP',
  props: {
    navItems: {
      type: Array,
      required: true,
    },
    config: Object
  },
  data() {
    return {
      selectedIndex: 0,
      underlineLeft: 0,
      underlineWidth: 0,
    };
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index;
      this.updateUnderlinePosition(index);
      this.$emit('choose', index)
    },
    updateUnderlinePosition(index) {
      const selectedItem = this.$refs.navItem[index];
      if (selectedItem) {
        const rect = selectedItem.getBoundingClientRect();
        this.underlineLeft = rect.left + rect.width / 3.5 + 'px';
        this.underlineWidth = rect.width / 3 + 'px';
      }
    },
  },
};
</script>

<style scoped>
.horizontal-nav-bar {
  display: flex;
  overflow-x: auto;
  flex-direction: row;
  justify-content: space-around;
}

.nav-item {
  padding: 10px 10px;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  cursor: pointer;
  transition: font-size 0.2s;
  color: white;
  z-index: 1;
}

.active {
  font-size: 16px;
  position: relative;
  z-index: 1;
}

.underline {
  position: absolute;
  margin-top: 37px;
  height: 2px;
  width: 2px;
  background-color: white;
  transition: left 0.2s, width 0.2s;
  z-index: 1;
}

.underline1 {
  position: absolute;
  margin-top: 37px;
  height: 2px;
  width: 2px;
  background-image: -moz-linear-gradient(113deg, rgb(255, 8, 68) 0%, rgb(255, 140, 105) 100%);
  background-image: -webkit-linear-gradient(113deg, rgb(255, 8, 68) 0%, rgb(255, 140, 105) 100%);
  background-image: -ms-linear-gradient(113deg, rgb(255, 8, 68) 0%, rgb(255, 140, 105) 100%);

  transition: left 0.2s, width 0.2s;
  z-index: 1;
}
</style>
